<template>
    <div class="BusinessArrears-box">
        <h5>客户欠款统计</h5>
        <div ref="target" class="content"></div>
    </div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";

const props = defineProps({
    // data: {
    //     type: Object,
    //     required: true,
    // },
   
});
let target = ref(null);
let myChart = null;
onMounted(() => {
    myChart = echarts.init(target.value);
    renderChart();
});
// watch(
//   () => props.data,
//   () => {
//     renderChart();
//   }
// );


let colorList = ['#45F4F5',  '#4CD1E0','#07A6FF','#ffd076', ];
// 颜色值配置一个空，用于显示间距
const colorList1 = [ '#45F4F5',  '#4CD1E0','#07A6FF','#ffd076', ];
const colorList2 = ['rgba(255, 208, 118, 0.4)', 'rgba(69, 244, 245, 0.4)', 'rgba(7, 166, 255, 0.4)', 'rgba(255, 255, 255, 0.4)',
    'rgba(0, 194, 255, 0.4)', 'rgba(163, 249, 254, 0.4)', 'rgba(0, 132, 255, 0.4)', 'rgba(5, 120, 185, 0.4)']
let data = [
    {
        "name": "30天以内",
        "value": "23.33",
        "percent": "7.8"
    },
    {
        "name": "30-60天",
        "value": "185.60",
        "percent": "62.05"
    },
    {
        "name": "60-90天",
        "value": "19.68",
        "percent": "6.58"
    },
    {
        "name": "90天以上",
        "value": "27.78",
        "percent": "9.29"
    }
];
let sum = 0;
let optionData = []
data.forEach(item => {
    sum += Number(item.value);
})
data.forEach(item => {
    optionData.push({ value: item.value, name: item.name });
    // 配置一个空值
    optionData.push({ name: '', value: sum / 100, itemStyle: { color: 'transparent' } });
})

let options = {
    backgroundColor: '#fff',
    tooltip: {
        trigger: 'item',
    },
    title: {
        left: '24%',
        top: '35%',
        itemGap: 10,
        textStyle: {
            color: '#333',
            fontSize: 16,
            fontWeight: 500
        },

        subtextStyle: {
            color: '#333',
            fontSize: 16,
            fontWeight: 600
        }
    },

    legend: {
        icon: 'none',
        orient: "horizontal",
        top: 0,
        left: 0,
        itemWidth: 4,
        itemHeight: 4,
        formatter: (name) => {
            let obj = data.find(item => item.name === name)
            const arr = [
                `{iconName|}{name|${name}}`
                // `{iconName|}{name|${name}}{value|${obj.value}}{percent|${obj.percent}}{unit|%}`
            ];
            return arr.join('')
        },
        textStyle: {
            color: '#333',
            fontSize: 12,
            rich: {
                name: {
                    color: '#333',
                    fontSize: 16,
                    width: 40,
                    padding: [0, 0, 0, 10],
                },
                value: {
                    color: '#2BDFD4',
                    fontFamily: 'PangMenZhengDao',
                    fontSize: 16,
                    width: 60,
                    textAlign: 'right',
                },
                percent: {
                    color: '#2BDFD4',
                    fontFamily: 'PangMenZhengDao',
                    fontSize: 16,
                },
                unit: {
                    color: '#092579',
                    fontSize: 16,
                }
            }
        },
        data: data.map((dItem, dIndex) => {
            return {
                ...dItem,
                textStyle: {
                    rich: {
                        iconName: {
                            width: 16,
                            height: 16,
                            borderRadius: 2,
                            backgroundColor: colorList[dIndex],
                        },
                        percent: {
                            color: colorList[dIndex],
                        },
                    }
                },

            }
        }),
    },

    series: [
        {
            // 饼图圈
            type: 'pie',
            zlevel: 3,
            radius: ['35%', '50%'],
            center: ['50%', '60%'],
            itemStyle: {
                    color: function (params) {
                        return colorList2[params.dataIndex]
                    }
            },
            label: {
                show: false,
            },
            data: optionData,
        },
        {
            // 最外圆圈
            type: 'pie',
            zlevel: 1,
            silent: true, //取消高亮
            radius: ['55%','60%'],
            center: ['50%', '60%'],
            itemStyle: {
                    //  borderColor: '#0A1934',
                    // borderWidth:5,
                    color: function (params) {
                        return colorList1[params.dataIndex]
                    }
            },
            label: {
                show: false
            },
            data: optionData,
        },
        {
            type: "pie",
            radius: ['64%', '64.2%'],
            center: ['50%', '60%'],

            itemStyle: {
                    shadowBlur: 1,
                    shadowColor: "rgba(15, 79, 150,0.61)",
                    color: "rgba(23,138,173,1)",
            },
            label: {
                show: false,
            },
            data: [0],
        },
        {
            type: "pie",
            radius: ['64%', '64.2%'],
            center: ['50%', '60%'],
            color: [
                "#55c2e200",
                "rgba(23,138,173,1)",
                "#ff5a6100",
                "ff5a6100",
            ],
            label: {
                show: false,
            },
            data: [140, 60, 240, 130],
            // data: [30,30,30,30,30,30],
        },
    ]
};


const renderChart = () => {
    myChart.setOption(options);

    // 图表自适应
    window.addEventListener('resize', () => {
        myChart.resize()
    })
};
</script>
<style scoped lang='scss'>
.BusinessArrears-box {
    width: 45%;
    height: 100%;
    cursor: pointer;

    h5 {
        position: relative;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 20px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin: 40px 0;

        &::after {
            content: '';
            width: 5px;
            height: 20px;
            background-color: #1947FF;
            border-radius: 5px;
            position: absolute;
            left: -9px;
            top: 0px;
        }
    }

    .content {
        width: 100%;
        height: calc(100% - 86px);
    }
}
</style>
